/*
 * @Author: xianfuyou
 * @Date: 2022-03-31 00:08:59
 * @LastEditors: your name
 * @LastEditTime: 2022-04-08 10:12:31
 * @Description: file content
 */

import React, { useState ,memo} from 'react'
import ButtonWarpCpn from '../CommBtn/CommBtn'

function ButtontopLists(props) {
  // console.log('props', props)
  // 创建一个头部左侧按钮渲染列表
  const [buttonTopLists, setButtonTopLists] = useState(props.lists)
  // 默认选中按钮
  const [currentBtn, setCurrentBtn] = useState(0)
  // 选中按钮的点击事件
  const clickChangeBtn = (index) => {
    // console.log('currentBtn', index)
    props.getOrderNowLists && props.getOrderNowLists(index)
    props.getFollowNowLists && props.getFollowNowLists(index)
    setCurrentBtn(index)
  }

  return (
    <>
      {
        buttonTopLists.map((item, index) => {
          return <ButtonWarpCpn bgcolor={currentBtn === index ? "#f56659" : "#488dc9"} key={index} onClick={() => { clickChangeBtn(item.id) }}>{item.text}<span className="text">{item.count}</span></ButtonWarpCpn>
        })
      }
    </>
  )
}
export default memo(ButtontopLists)